<template>

  <n-form
    :model="formData"
    :rules="formRules"
    ref="formInstance"
    label-placement="left"
    label-width="80px">
    <n-grid x-gap="12" :cols="1">
      <n-gi responsive="self">
        <n-form-item label="菜单名称" path="resourceName">
          <n-input v-model:value="formData.resourceName" placeholder="请输入菜单名称"/>
        </n-form-item>
      </n-gi>
      <n-gi responsive="self">
      </n-gi>
      <n-gi>
        <n-form-item label="图标" path="resourceCode">
          <n-avatar style="background: white;color: black;border: 1px solid #cccccc"
                    @click="doSelectIconModal">
            <i :class="formData.iconDefault" style="font-size: 24px"></i>
          </n-avatar>
          <n-input v-model:value="formData.iconDefault" readonly placeholder="点击选择图标"
                   @click="doSelectIconModal"/>
        </n-form-item>
      </n-gi>
      <n-gi>
        <n-form-item label="菜单编码" path="resourceCode">
          <n-input v-model:value="formData.resourceCode" placeholder="请输入菜单编码"/>
        </n-form-item>
      </n-gi>
      <n-gi>
        <n-form-item label="路由地址" path="resourceUrl">
          <n-input v-model:value="formData.resourceUrl" placeholder="请输入路由地址"/>
        </n-form-item>
      </n-gi>

      <n-gi>
        <n-form-item label="状态">
          <n-radio-group v-model:value="formData.enabled">
            <n-space>
              <n-radio :key="it.value" v-for="it in enabledOptions" :value="it.value"
                       :label="it.label"/>
            </n-space>
          </n-radio-group>
        </n-form-item>
      </n-gi>
      <n-gi>
        <n-form-item label="外链">
          <n-radio-group v-model:value="formData.outLink">
            <n-space>
              <n-radio :key="it.value" v-for="it in enabledOptions" :value="it.value"
                       :label="it.label"/>
            </n-space>
          </n-radio-group>
        </n-form-item>
      </n-gi>
      <n-gi :span="2">
        <n-form-item label="菜单描述" path="resourceDescription">
          <n-input type="textarea" v-model:value="formData.resourceDescription"
                   placeholder="请输入菜单描述"/>
        </n-form-item>
      </n-gi>
    </n-grid>
  </n-form>
</template>
<script lang="ts">
import {onMounted, ref, unref} from "vue";
import {enabledOptions, formRules} from "./Service";
import httpApi from "../httpApi";
import {FormInst} from "naive-ui";
import {checkFormData} from "@/utils/formUtil";
import {IconSelectService} from "@/components/IconSelect/index";

export default {
  name: "SysResourceMenuUpdate",
  props: {
    id: {
      type: [String, Number],
      default: null
    },
    readMode: {
      type: [String],
      default: "read"
    },
    parentId: {
      type: [String, Number]
    },
    appCode: {
      type: [String]
    }
  },
  setup: function (props) {
    const formInstance = ref<FormInst | null>(null);
    const {parentId, appCode} = unref(props);
    const formData = ref<any>({
      id: props.id,
      enabled: 1,
      resourceAppCode: appCode,
      fkParentId: parentId,
      resourceType: "menu",
      resourceConfig: {
        outLink: 0
      }
    });
    const init = async () => {
      if (props.id) {
        let msg = await httpApi.selectSysTbResourceById(props.id);
        formData.value = msg.data;
        formData.value.outLink=formData.value.resourceConfig?.outLink
      }
    };
    const doSubmit = async () => {
      await checkFormData(formInstance);
      const data = formData.value;
      if (!data.resourceConfig) {
        data.resourceConfig = {}
      }
      data.resourceConfig.outLink = formData.value.outLink;
      return httpApi.doSaveSysTbResource(formData.value);
    };
    const doUpdate = async () => {
      await checkFormData(formInstance);
      const data = formData.value;
      if (!data.resourceConfig) {
        data.resourceConfig = {}
      }
      data.resourceConfig.outLink = formData.value.outLink;
      return httpApi.doUpdateSysTbResource(formData.value);
    };
    const doSelectIconModal = async () => {
      const iconClass = await IconSelectService.doSelectIconModal();
      formData.value.iconDefault = iconClass;
    };
    onMounted(() => {
      init();
    });
    return {
      doSelectIconModal,
      enabledOptions,
      formData,
      formInstance,
      formRules,
      doSubmit,
      doUpdate
    };
  }
};
</script>

<style lang="less" scoped></style>
